{extend name="../../admin/view/main"}

{block name='content'}
<style>
    xm-select {
        min-height: 280px;
    }

    xm-select > .xm-body {
        top: 100% !important;
    }

    xm-select > .xm-label.single-row {
        position: absolute;
        top: 0;
        bottom: 0px;
        left: 0px;
        right: 30px;
        overflow: auto;
    }

    xm-select > .xm-body .scroll-body {
        background-color: #e6e6e6;
        max-height: 250px !important;
    }

    xm-select > .xm-body .xm-search {
        margin-bottom: 0px !important;

    }


    xm-select > .xm-label.single-row .scroll {
        overflow-y: unset;
    }


    xm-select > .xm-label .scroll .label-content {
        display: flex;
        flex-wrap: wrap;
    }
</style>
<form action="{:sysuri()}" class="layui-card layui-form" data-auto="true" method="post">
    <div class="layui-card-body">

        <label class="layui-form-item relative block">
            <span class="help-label"><b>企业标签</b></span>
            <input class="layui-input" name="name" placeholder="请输入企业标签" required value='{$vo.name|default=""}'>
        </label>


        <div class="layui-form-item" id="sbjzrq-div" style="display: none">
            <div style="float: left;min-width: auto;height: 38px;line-height: 38px;">
                <span class="help-label" style="padding-right: 10px;"><b>是否可见</b></span>
            </div>

            <div class="layui-form-item layui-col-xs12" style="">
                {if !empty($vo.is_kj)}
                <input type="radio" name="is_kj" lay-filter="riqitype" value="2" title="不可见" {if
                       $vo.is_kj==2}checked{/if}>
                <input type="radio" name="is_kj" lay-filter="riqitype" value="1" title="可见" {if
                       $vo.is_kj==1}checked{/if}>
                {else}
                <input type="radio" name="is_kj" lay-filter="riqitype" value="2" title="不可见">
                <input type="radio" name="is_kj" lay-filter="riqitype" value="1" title="可见" checked>
                {/if}

            </div>
        </div>
        <div class="layui-form-item layui-col-xs12" style="display:none;">
            <span class="help-label"><b>关联企业</b> 数量: <span id="enterprisesNum"></span></span>
            <span class="color-desc margin-left-5"></span>
            <style>        .xm-select-selected {
                white-space: normal; /* 允许文本换行 */
                word-wrap: break-word; /* 在长单词或 URL 中断行 */
                overflow: hidden; /* 隐藏超出部分 */
                display: -webkit-box; /* 使用弹性盒子布局 */
                -webkit-box-orient: vertical; /* 垂直方向排列 */
            }
            </style>
            <div id="enterpriseList" class="xm-select-demo content-"></div>
            <input type="hidden" name="enterprises" id="enterprises" value="{$enterprises|default=''}">
        </div>

        <div class="hr-line-dashed"></div>
        {notempty name='vo.id'}<input name='id' type='hidden' value='{$vo.id}'>{/notempty}

        <div class="layui-form-item text-center">
            <button class="layui-btn" type="submit">保存数据</button>
            <button class="layui-btn layui-btn-danger" data-history-back data-confirm="确定要取消编辑吗？" type='button'>取消编辑
            </button>
        </div>
    </div>

</form>

<script>
    $(function () {
        getEnterpriseList("{$vo.id}");

        function findInSet(mainString, searchString) {
            const items = mainString.split(',');
            return items.includes(searchString);
        }

        function getEnterpriseList(bqid) {

            layui.use(['xmSelect'], function () {
                $.ajax({
                    type: 'get',
                    url: "{:url('getEnterpriseList')}",
                    data: "",
                    dataType: "json",
                    success: function (res) {
                        if (res.code) {
                            var datas = [];
                            var dataArr = [];
                            res.data.forEach(function (item) {
                                if (findInSet(item.qybq, bqid)) {
                                    datas.push({name: item.qymc, value: item.id, selected: true});
                                    dataArr.push(item.id);
                                } else {
                                    datas.push({name: item.qymc, value: item.id});
                                }
                            });
                            $('#enterprisesNum').text(dataArr.length);
                            xmSelect.render({
                                el: '#enterpriseList',
                                multiple: true, // 设置为多选
                                direction: 'column', // 设置选项竖向显示
                                tips: '请选择企业',//选项提示文字
                                filterable: true,//搜索模式
                                data: datas,
                                on: function (data) {
                                    var selectArr = data.arr;
                                    var seachArr = [];
                                    for (var j = 0; j < selectArr.length; j++) {
                                        seachArr.push(selectArr[j].value)
                                    }
                                    console.log(seachArr.toString(), '------777777');
                                    $("#enterprises").val(seachArr.toString());
                                    $('#enterprisesNum').text(seachArr.length);
                                }
                            })
                            // // 初始化 xmSelect
                            // const xmSelect = layui.xmSelect;
                            // new xmSelect({
                            //     el: '#enterpriseList',
                            //     tips: '请选择企业',//选项提示文字
                            //     filterable: true,//搜索模式
                            //     data: datas,
                            //     radio: false, // 设置为多选模式
                            //     search: true, // 开启搜索功能
                            //     paging: true, // 开启分页功能
                            //     page: 10, // 每页显示数量
                            //     model: 'vertical', // 设置为竖向显示
                            //     callback: {
                            //         onChange: function (data) {
                            //             var selectArr = data.arr;
                            //             var seachArr = [];
                            //             for (var j = 0; j < selectArr.length; j++) {
                            //                 seachArr.push(selectArr[j].value)
                            //             }
                            //             console.log(seachArr.toString(), '------777777');
                            //             $("#enterprises").val(seachArr.toString());
                            //         }
                            //     }
                            // });
                        } else {
                            console.log(res.info);
                        }
                    },
                    error: function (err) {
                        console.log(err)
                    }
                });
            });
        }
    });
</script>
{/block}
